<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创新研发</title>
  <!-- 链入css初始化 -->
  <link rel="stylesheet" href="../../css/base.css">
  <!-- 链入头部和底部通用样式 -->
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/main.css">
  <!-- 链入首页主体样式 -->
  <link rel="stylesheet" href="../../css/index.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" href="../../css/idangerous.swiper.css">
  <link rel="stylesheet" type="text/css" href="../../css/animate.css">
  <link rel="stylesheet" type="text/css" href="../../css/innovation/list.css">
  <link rel="stylesheet" type="text/css" href="../../css/innovation/list1.css">
  <link rel="stylesheet" type="text/css" href="../../css/innovation/list2.css">
  <!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->
</head>
<style>
  .view {
    width: 100%;
    height: 100%;
    background: url(../../img/recurent/bb_03.jpg) no-repeat;
    background-size: cover;
    padding: 15px;
  }

  .swiper-slide {
    background-position: 50% 50%;
    position: relative;
  }

  /* 焦点需要设置 */
  .pagination1 {
    position: absolute;
    z-index: 100;
    left: 50%;
    margin-left: -60px;
    bottom: 40px;
  }

  .swiper-pagination-switch {
    width: 28px;
    height: 8px;
    border-radius: 0;
    display: inline-block;
    margin: 7px 7px 13px;
    cursor: pointer;
    border: none;
    background: #fffafc;
  }

  .swiper-pagination-switch:hover,
  .swiper-active-switch {
    background: #068F1F;
  }

  .arrow-left {
    background: url(img/production/back.png) no-repeat left top;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -25px;
    width: 28px;
    height: 51px;
    z-index: 10;
  }

  .arrow-right {
    background: url(img/production/arrow.png) no-repeat left bottom;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -25px;
    width: 28px;
    height: 51px;
    z-index: 10;
  }

  .pagination1>span::after {
    width: 40px;
    height: 40px;
    background-image: url('../../img/production/icon2-1.png');
  }

  .preview {
    margin-top: 20px;
  }

  .preview .swiper-container {
    overflow-x: auto;
  }


  .preview .swiper-slide,
  .preview ul li {
    width: 120px;
    /* margin-left: 21px;
    margin-right: 21px;
    display: inline-block;
    float: none; */
    cursor: pointer;
  }

  .preview .swiper-slide div.img,
  .preview ul li div.img {
    height: 80px;
    width: 80px;
    line-height: 80px;
    border-radius: 50%;
text-align: center;
    border: 1px solid rgba(221, 221, 221, 1);
    box-shadow: 0px 1px 0px 0px rgba(221, 221, 221, 1);
    background: rgb(255, 255, 255);
    behavior: url(../../public/PIE.htc);
  }

  .preview .swiper-slide:last-child .arrowImg {
    display: none;
  }

  .preview .arrow-left {
    background: url(images/feel3.png) no-repeat left top;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -9px;
    width: 9px;
    height: 18px;
    z-index: 10;
  }

  .preview .arrow-right {
    background: url(images/feel4.png) no-repeat left bottom;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
    width: 9px;
    height: 18px;
    z-index: 10;
  }

  .preview img {
    padding: 1px;
    /* position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px; */
  }

  .preview .arrowImg {
    padding: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 32px;
    margin-top: -28px;
  }

  .preview .active-nav div.img {
    background: #058F1F;
  }

  .preview .active-text {

    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    margin-top: 8px;
  }

  .preview .active-nav .active-text {
    color: #058F1F
  }
</style>

<body>
  <header></header>
  <div class="productList-container">
    <div class="common-container-img">
      <img class="bannerPc" src="../../img/new/banner_02.jpg" alt="">
      <img class="bannerMb" src="../../img/new/banner_02.jpg" alt="">
      <ul class="common-container-type clearfix wow fadeInUpBig">
        <li><img class="icon" src="../../img/new/icon1.png" alt=""><span>公司研发</span></li>
        <li><img class="icon" src="../../img/new/icon-1.png" alt=""><span>品质保障</span></li>
        <li><img class="icon" src="../../img/new/icon-2.png" alt=""><span>工艺流程</span></li>
      </ul>
    </div>
    <div class="tabBox">
      <!-- 公司研发 -->
      <div class="companyDevelopment listEle ">
        <div class="companyDevelopment-img wow fadeInUpBig"><img src="../../img/new/banner_05.jpg" alt=""></div>
        <div class="companyDevelopment-news wow fadeInUpBig">
          <div class="companyDevelopment-news-content">
            <div class="title">2008年公司设立了研发中心，按照高标准建成了研发能力强、具有国内先进水平的中心实验室。</div>
            <div class="text">实验室包括物理化学检验系统、重金属检验系统、微生物检验系统和品评试验系统等，为产品的销售及出口自检提供了专业的条件和平台。
              同时还拥有一批高素质、高学历、经验丰富的研发队伍，中心人员全部为大专以上学历，其中高级技术职称二十余人。中心配备有PEAA600原子吸收光谱仪、
              气相色谱仪、双道原子荧光光度计、凯式定氮装置、紫外分光光度计、全自动微波消解系统等先进设备，为研发工作开展打下了良好的基础。</div>
          </div>
          <div class="companyDevelopment-news-content">
            <div class="title">公司始终把调味品行业的现有优势与现代化生产相结合，重视技术创新和高新技术的应用，先后投入数千万元，</div>
            <div class="text">对工艺难度较大的原材料加工生产线进行技术改造，研发出国内第一条拥有自主知识产权的全封闭式粉状调味品加工生产线，完成了十三香全自动包装
              生产线的技术改造，使十三香调味品的生产完全实现了自动化。公司又投入大量资金用于企业的ERP、生产自动化控制DCS、质量检验等系统， 实现了生产管理和控制一体化，使企业的生产能力大幅提高。</div>
          </div>
        </div>
      </div>
      <!-- 品质保障 -->
      <div id="innovationList1" class="listEle displayNone">
        <div class="titles1 show wow fadeInUpBig">品质保障</div>
        <div class="titleLine1 show wow fadeInUpBig"><span></span></div>
        <div class="productText1 show wow fadeInUpBig">2008年公司设立了研发中心，按照高标准建成了研发能力强、具有国内先进水平的中心实验室。实验室包括物理化学检验系统、
          重金属检验系统、微生物检验系统和品评试验系统等，为产品的销售及出口自检提供了专业的条件和平台。</div>
        <div class="quality wow fadeInUpBig">
          <div class="quality-img clearfix ">
            <div class="pull-left col-lg-8 first">
              <div class="quality-img-title">自动控制，配料精准</div>
              <div class="quality-img-show"><img src="../../img/new/img1.png" alt=""></div>
            </div>
            <div class="pull-left col-lg-4">
              <div class="quality-img-title">充分熟化，香味独特</div>
              <div class="quality-img-show"><img src="../../img/new/img2.png" alt=""></div>
            </div>
          </div>
          <div class="quality-img clearfix ">
            <div class="pull-left col-lg-4 first">
              <div class="quality-img-title">设备先进，工艺考究</div>
              <div class="quality-img-show"><img src="../../img/new/img2.png" alt=""></div>
            </div>
            <div class="pull-left col-lg-8">
              <div class="quality-img-title">精挑细选，品质保障</div>
              <div class="quality-img-show"><img src="../../img/new/img1.png" alt=""></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 工艺流程 -->
      <div class="process   listEle displayNone">
        <div class="view">
          <div class="swiper-container">
            <a class="arrow-left" href="#"></a>
            <a class="arrow-right" href="#"></a>
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img class="" src="../../img/banner1.jpg" alt="">
              </div>
              <div class="swiper-slide">
                <img class="" src="../../img/banner3.jpg" alt="">
              </div>
              <div class="swiper-slide">
                <img class="" src="../../img/banner1.jpg" alt="">
              </div>
              <div class="swiper-slide">
                <img class="" src="../../img/banner3.jpg" alt="">
              </div>
            </div>
          </div>
          <div class="pagination1"></div>
        </div>
        <div class="preview">
          <!-- <ul class="clearfix">
            <li class=" active-nav">
              <div class="img"><img src="../../img/new/icon/icon2.png" alt="" class="displayNone"><img
                  src="../../img/new/icon-1-1.png" alt=""></div>
              <div class="active-text">定量包装</div>
              <img class="arrowImg" src="../../img/arrow.png" alt="">
            </li>
            <li>
              <div class="img"><img src="../../img/new/icon/icon2.png" alt="" class="displayNone"><img
                  src="../../img/new/icon-1-1.png" alt=""></div>
              <div class="active-text">定量包装</div>
              <img class="arrowImg" src="../../img/arrow.png" alt="">
            </li>
            <li>
              <div class="img"><img src="../../img/new/icon/icon2.png" alt="" class="displayNone"><img
                  src="../../img/new/icon-1-1.png" alt=""></div>
              <div class="active-text">定量包装</div>
              <img class="arrowImg" src="../../img/arrow.png" alt="">
            </li>
            <li >
              <div class="img"><img src="../../img/new/icon/icon2.png" alt="" class="displayNone"><img
                  src="../../img/new/icon-1-1.png" alt=""></div>
              <div class="active-text">定量包装</div>
              <img class="arrowImg" src="../../img/arrow.png" alt="">
            </li>
          </ul> -->
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="img"><img src="../../img/new/icon/icon2.png" alt="" class="displayNone"><img
                    src="../../img/new/icon-1-1.png" alt=""></div>
                <div class="active-text">定量包装</div>
                <img class="arrowImg" src="../../img/new/jt.png" alt="">
              </div>
              <div class="swiper-slide">
                <div class="img"><img src="../../img/new/icon/icon2.png" alt=""><img src="../../img/new/icon-1-1.png"
                    alt="" class="displayNone"></div>
                <div class="active-text">定量包装</div>
                <img class="arrowImg" src="../../img/new/jt.png" alt="">
              </div>
              <div class="swiper-slide">
                <div class="img"><img src="../../img/new/icon/icon2.png" alt=""><img src="../../img/new/icon-1-1.png"
                    alt="" class="displayNone"></div>
                <div class="active-text">定量包装</div>
                <img class="arrowImg" src="../../img/new/jt.png" alt="">
              </div>
              <div class="swiper-slide">
                <div class="img"><img src="../../img/new/icon/icon2.png" alt=""><img src="../../img/new/icon-1-1.png"
                    alt="" class="displayNone"></div>
                <div class="active-text">定量包装</div>
                <img class="arrowImg" src="../../img/new/jt.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer></footer>

  <script src="../../js/jquery-1.11.3.min.js"></script>
  <script src="../../public/idangerous.swiper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
  <script src="../../js/common.js"></script>
  <script type="text/javascript">
    // $(function () {
    var that = this
    var tabActiveImgData = [{ img: '../../img/new/icon.png' }, { img: '../../img/new/icon-1-1.png' }, { img: '../../img/new/icon-2-1.png' }]
    var tabImgData = [{ img: '../../img/new/icon1.png' }, { img: '../../img/new/icon-1.png' }, { img: '../../img/new/icon-2.png' }]
    var swiperRun = function () {
      // 横向滚动
      var viewSwiper = new Swiper('.view .swiper-container', {
        // autoplay: 1000,
        // visibilityFullFit: true,
        // speed: 1500,
        // loop: true,
        // grabCursor: true,
        // pagination: '.pagination1',
        // paginationClickable: true,
        // slidesPerView: 'auto',
        // onlyExternal: true,
        effect: "fade",
        calculateHeight: true, //自动适应图片的高度
        updateOnImagesReady: true,//当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。
        observer: true,
        observeParents: true,//启动动态检查器,当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper  
        autoplayDisableOnInteraction: false, //防止手动拖拽后失效
        onSlideChangeStart: function () {
          updateNavPosition()
        }
      })
      $('.view .arrow-left,.preview .arrow-left').on('click', function (e) {
        e.preventDefault()
        if (viewSwiper.activeIndex == 0) {
          viewSwiper.swipeTo(viewSwiper.slides.length - 1, 1000);
          return
        }
        viewSwiper.swipePrev()
      })
      $('.view .arrow-right,.preview .arrow-right').on('click', function (e) {
        e.preventDefault()
        if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
          viewSwiper.swipeTo(0, 1000);
          return
        }
        viewSwiper.swipeNext()
      })
      $('.preview .swiper-slide:last-child .arrowImg').css({
        display: 'none'
      })
      var previewSwiper = new Swiper('.preview .swiper-container', {
        // visibilityFullFit: true,
        slidesPerView: 'auto',
        // noSwiping : false,
        onlyExternal: true,
        calculateHeight: true, //自动适应图片的高度
        updateOnImagesReady: true,//当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。
        observer: true,
        observeParents: true,//启动动态检查器,当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper  
        autoplayDisableOnInteraction: false, //防止手动拖拽后失效
        onSlideClick: function () {
          viewSwiper.swipeTo(previewSwiper.clickedSlideIndex)
        }
      })
      $('.preview .swiper-slide').eq(0).addClass('active-nav')
      function updateNavPosition() {
        $('.preview .active-nav').removeClass('active-nav')
        if (!viewSwiper.activeIndex && viewSwiper.activeIndex != 0) return
        var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
        activeNav.find('.img')[0].children[0].style.display = 'none'
        activeNav.find('.img')[0].children[1].style.display = 'inline-block'
        var siblingsArr = Array.prototype.slice.call(activeNav.siblings())
        console.log(siblingsArr)
        $(siblingsArr).each(function (index, item) {
          item.children[0].children[0].style.display = 'inline-block'
          item.children[0].children[1].style.display = 'none'
        })
        if (!activeNav.hasClass('swiper-slide-visible')) {
          if (activeNav.index() > previewSwiper.activeIndex) {
            var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
            previewSwiper.swipeTo(activeNav.index() - thumbsPerNav)
          } else {
            previewSwiper.swipeTo(activeNav.index())
          }
        }
      }
    }
    tabChange(tabActiveImgData, tabImgData, swiperRun, 'cxyf')
    function init() {

      $('header').load('../../template/header.html')
      $('footer').load('../../template/footer.html')

      if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
      };

    }
    init()
    // })
  </script>
</body>

</html>